<template>
  <div>
    <div>{{ message }}</div>
    <button @click="component = DynamicLeft">显示左侧</button>
    <button @click="component = DynamicRight">显示右侧</button>
    <div>
      <!-- include="DynamicRight" -->
      <keep-alive>
        <component :is="component" @pub-message="onPubMsg"></component>
      </keep-alive>
    </div>
  </div>
</template>

<script setup lang="ts">
import { shallowRef, ref } from 'vue'
import DynamicLeft from './DynamicLeft.vue'
import DynamicRight from './DynamicRight.vue'
const component = shallowRef(DynamicLeft)

const message = ref('')
const onPubMsg = (msg) => {
  message.value = msg
}
</script>

<style scoped></style>
